<template>
    <!-- 如下容器是用来呈现echarts图形的 -->
   <div style="width:420px;height:250px" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    mounted(){
        let chart=echarts.init(this.$refs.chart)
        let options={
            // title:{
            //     text:'用户购买统计'
            // },
            legend:{
                orient:'vertical',//更改图例的方向，方向有两个
                left:'10',
                bottom:'20'
            },
            tooltip:{
                formatter:'{b}:{c}({d}%)',
                backgroundColor:'rgba(0,0,0,.3)',
                borderColor:'#000',
                textStyle:{
                    color:'white',
                    
                }
            },
         
            //color:['red','green','blue','orange'],
            series:[
                {
                    type:'pie',
                    data:[
                        {
                            name:'未消费用户',
                            value:47728
                        },
                        {
                            name:'消费一次用户',
                            value:3221,
                        },
                        {
                            name:'留存客户',
                            value:637
                        },
                        {
                            name:'回流客户',
                            value:105
                        }
                    ]
                }
            ]
        }
        chart.setOption(options)
    }
}
</script>

<style>

</style>